<template>
    <div>
        <div v-for="item in arr">
            <img :data-index="item" v-lazy="item" width="400" alt="">
        </div>
    </div>
</template>
 
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import type { Directive } from 'vue'
const images: Record<string, { default: string }> = import.meta.glob('./img/*.*',{eager:true})
console.log(images);

let arr = Object.values(images).map(v => v.default)
 
let vLazy: Directive<HTMLImageElement, string> = async (el, binding) => {
    let url = await import('@/assets/logo.svg')
    el.src = url.default;
    // vue3 内置Api--IntersectionObserver  判断当前元素是否在可视区域出现
    let observer = new IntersectionObserver((entries) => {
        console.log(entries[0])
        // intersectionRatio > 0 表示漏出的多少元素的大小
        if (entries[0].intersectionRatio > 0 && entries[0].isIntersecting) {
            setTimeout(() => {
                el.src = binding.value;
                observer.unobserve(el)
            }, 1000)
        }
    })
    observer.observe(el)
}
 
</script>
 
<style scoped lang='less'></style>